<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS章节 第二课 的第一个文件</title>
	</head>

	<body>
		<h1 align="center">CSS基本语法</h1>
		<hr>
		<p>
			<br>
		</p>

		<p>演示：</p>


		<div>
			<p>
				这里是一段文本内容
				<span>你看到的文本没换行</span>
				<b>文本流内容会自然排列，自动换行</b>
			</p>
		</div>

		<div>
			<div style="float: left;background: rgba(200,200,0,0.8);">这里是一个会计元素</div>
			<div style="float: left;background: rgba(200,0,200,0.8);">块级元素独占一行</div>
			<div style="background: rgba(0,0,0,1)">
				块级元素中的文字内
				<span>容是文本流内容块级元素中的文字内容是文本流内容块级元素中的文字内容是文本流内容块级元素中的文</span>
				字内容是文本流内容
			</div>
		</div>

		<div class="box">
			<div style="background: #0f0;">1</div>
			<div style="background: #7f7; width: 120px; float: right;">2</div>
			<div style="width: 140px;">3</div>
		</div>
		<style>
			.box div {
				width: 100px;
				height: 100px;
				background: #cfc;
			}
		</style>

		<p>
			<div class="nav">
				<a href="">1</a>
				<a href="">2</a>
				<a href="">3</a>
				<a href="">4</a>
				<a href="">首页</a>
				<a href="">新闻</a>
				<a href="">图片</a>
				<a href="">军事</a>
				<a href="">首页</a>
				<a href="">新闻</a>
				<a href="">图片</a>
				<a href="">军事</a>
				<div class="clear"></div>
			</div>
			<div class="test">
				这里是测试区域
			</div>
		</p>


		<style>
			.clear {
				clear: both;
			}
			/*.nav:after {
				content: ' ';
				display: block;
				clear: both;
			}*/
			.nav {
				/*height: 32px;*/
				/*overflow: hidden;*/
			}
			.nav a {
				float: left;
				display: block;
				background: #ccc;
				width: 100px;
				height: 30px;
				border: 1px solid #333;
			}
			.test {
				width: 100px;
				height: 100px;
				background: #44c;
			}
		</style>

	</body>
</html>